<!--
 * @Descripttion: 保养计划
 * @LastEditors: xzh
 * @LastEditTime: 2024-04-21 18:52:19
-->
<template>
  <el-card class="el-card-bottom-top">
    <template #header>
      <span>{{
        $t(
          `page.dashboardManageArr.afterSaleDashboardArr.${upKeepType}UpkeepPlan`
        )
      }}</span>
    </template>
    <!-- 保养状态图表 -->
    <el-col :span="6">
      <DileChart
        ref="upkeepStatusChartRef"
        :loading="loading"
        :chart="upkeepPlanParam.upkeepStatusChart"
      />
    </el-col>
    <!-- 保养任务图表 -->
    <el-col :span="5" class="upkeep-taskChart">
      <DileChart
        ref="upkeepTaskChartRef"
        :loading="loading"
        :chart="upkeepPlanParam.upkeepTaskChart"
      />
      <p>
        {{
          `${$t(`page.dashboardManageArr.equipDashboardArr.taskTotal`)}${
            dataMap?.ukeepTask?.taskTotal || 0
          }`
        }}
      </p>
    </el-col>
    <el-col :span="12" :style="{ height: 'max-content !important' }">
      <StatisticStatus :dataArr="upkeepTaskStatusArr" :loading="loading" />
    </el-col>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, watch, computed } from "vue";
import type { object_Inf } from "@/utils/typings/index.type";
import DileChart from "@/components/dile-chart/index.vue";
import StatisticStatus from "@/views/dashboardManage/components/statistic-status/index.vue";
import AfterSaleUtils from "../afterSale-utils";
const props = defineProps({
  //保养类型
  upKeepType: {
    type: String,
    requited: false,
    default: "",
  },
  dataMap: {
    type: Object,
    requited: true,
    default: {},
  },
  loading: {
    type: Boolean,
    requited: true,
    default: false,
  },
});
/**
 * @Author: xzh
 * @Descripttion: 保养状态图表实例
 * @Param:
 */
let upkeepStatusChartRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 保养任务实例
 * @Param:
 */
let upkeepTaskChartRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 保养计划参数
 * @Param:
 */
let upkeepPlanParam = reactive<object_Inf>({
  //保养状态图表
  upkeepStatusChart: {},
  //保养任务
  upkeepTaskChart: {},
});
/**
 * @Author: xzh
 * @Descripttion:保养任务状态
 * @Param:
 * @param {*} computed
 */
let upkeepTaskStatusArr = computed(() => {
  let { upkeepTaskStatus } = props.dataMap;
  return (upkeepTaskStatus || []).map((data: object_Inf, index: number) => {
    //获取任务状态扩展信息
    let statusExtra =
      AfterSaleUtils.upkeepTaskStatusArr[
        index % AfterSaleUtils.upkeepTaskStatusArr.length
      ] || {};
    return {
      ...data,
      ...statusExtra,
    };
  });
});
/**
 * @Author: xzh
 * @Descripttion:监听值修改
 * @Param:
 */
watch(
  () => props.dataMap,
  () => {
    Object.keys(props.dataMap || {}).length > 0 && initUpKeepPlan();
  }
);
/**
 * @Author: xzh
 * @Descripttion: 加载保养计划信息
 * @Param:
 */
let initUpKeepPlan = () => {
  let { upkeepStatus, ukeepTask } = props.dataMap,
    { upkeepStatusChart, upkeepTaskChart } = toRefs(upkeepPlanParam);
  //获取保养状态图表
  upkeepStatusChart.value = AfterSaleUtils.getUpkeepStatusChart(upkeepStatus);
  //获取保养任务图表
  upkeepTaskChart.value = AfterSaleUtils.getUpkeepTaskChart(
    ukeepTask.chart || []
  );
  //加载图表
  upkeepStatusChartRef.value.init();
  upkeepTaskChartRef.value.init();
};
</script>
<style lang="scss" scoped>
.el-card {
  :deep(.el-card__body) {
    height: max-content !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    .el-col {
      height: 25rem !important;
    }
    .upkeep-taskChart {
      display: flex;
      flex-direction: column;
      > div {
        flex: 1;
        height: 0;
      }
      > p {
        flex: 1rem 0 0;
        text-align: center;
        font-weight: 700;
        font-style: normal;
        color: rgb(96, 98, 102);
      }
    }
  }
}
</style>
